<template>
	<view class="releMsg">
		<navBar isBack title="发布动态" color="#333" backColor="#333" background="#fff"></navBar>
		<view class="imgBox" v-if="type=='img'">
			<view class="item" v-for="(item,index) in mediaList" :key="index">
				<image :src="item.path" mode=""></image>
				<image class="delImg" @click="delImgFn(index)" :src="`${baseImg}/static/adminShop/delImg.png`"  mode=""></image>
			</view>
			<view class="item iconfont" @click="uploadFN('img')">&#xe67f;</view>
		</view>
		<view class="videoBox" v-else>
			<view class="item" v-for="(item,index) in mediaList" :key="index">
				<video :src="item.path" mode=""></video>
				<image class="delImg" @click="delImgFn(index)" :src="`${baseImg}/static/adminShop/delImg.png`"  mode=""></image>
			</view>
			<view class="item iconfont" @click="uploadFN('video')" v-if="mediaList.length<1">&#xe67f;</view>
		</view>
		<view class="imgBox" style="padding-left:16rpx;" v-if="type!='img'">
			<view class="item" v-if="coverUrl">
				<image :src="coverUrl" mode=""></image>
				<image class="delImg" @click="delCoverFn" :src="`${baseImg}/static/adminShop/delImg.png`"  mode=""></image>
			</view>
			<view class="item iconfont" v-if="coverUrl==''" @click="uploadFN('cover')">&#xe67f;</view>
			<text style="margin-top: auto;">（封面图）</text>
		</view>
		
		<view class="txt" v-if="type=='img'">每张图片大小不超过2M，尺寸建议宽度为640，并保持图片大小一致</view>
		<view class="txt" v-else>视频发布建议在1.5分钟以内，大小不超过30M</view>
		<view class="tit">
			<input type="text" v-model="tit" value="" @input="changeInput" maxlength="28" placeholder-class="titCss" placeholder="添加标题（会更容易被推荐哦~）" />
			{{inputNum}}/28
		</view>
		<view class="content">
			<textarea value="" v-model="cont" maxlength="1000" @input="changeArea" placeholder-class="contentCss" placeholder="说说你此刻的感受吧~" />
			<text>{{areaNum}}/1000</text>
		</view>
		<!-- 添加店铺 -->
		<view class="addStore" @click="toSelectStore">
			<view class="left" v-if="!Object.keys(storeInfo).length">
				<image :src="`${baseImg}/static/adminShop/releStore.png`" mode=""></image>
				添加店铺
			</view>
			<view class="left" v-else>
				<image :src="storeInfo.store_logo.path" mode=""></image>
				{{storeInfo.store_name}}
			</view>
			<text class="iconfont icon-jinru"></text>
		</view>
		
		<!-- 添加商品 -->
		<view class="addShop">
			<view class="topTit" @click="toSelectShop">
				<image :src="`${baseImg}/static/adminShop/relePlus.png`" mode=""></image>
				添加商品（{{shopList.length}}/5）
			</view>
			<view class="shopBox">
				<view class="item" v-for="(item,index) in shopList" :key="index">
					<image :src="item.main_imgurl" mode=""></image>
					<view class="shopInfo">
						<view class="title omit-1">{{item.product_title}}</view>
						<view class="price">
							￥{{item.price}}
							<text>售价￥{{item.primary_price}}</text>
						</view>
					</view>
					<image class="delImg" @click="delShop(index)" :src="`${baseImg}/static/adminShop/delImg.png`" mode=""></image>
				</view>
			</view>
		</view>
		
		<!-- 发布按钮 -->
		<view class="btn">
			<!-- <view class="btnLeft">
				<view class="img">
					<image :src="`${baseImg}/static/constr/storage.png`" mode=""></image>
				</view>
				存草稿
			</view> -->
			<button type="default" @click="submitFN">发布</button>
		</view>
	</view>
</template>

<script>
	import URL from '@/config/url.js'
	export default{
		data(){
			return{
				baseImg:this.$static,
				inputNum:0,
				areaNum:0,
				type:'img',
				mediaList:[],
				tit:'',
				cont:'',
				storeInfo:{}, //选择的店铺
				shopInfo:{}, //选择的商品(当前单个)
				shopList:[], //选择的商品列表
				
				coverUrl:'',
				coverId:'',
				moduleType:'', //模块类型 superHK-超级管家 
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.moduleType = options.moduleType;
		},
		onShow() {
			if(Object.keys(this.shopInfo).length){
				this.shopList.push(this.shopInfo)
			}
			console.log(this.shopList,'商品列表')
		},
		methods:{
			// 添加店铺按钮
			toSelectStore(){
				let storeId = this.storeInfo.id?this.storeInfo.id:''
				this.shopInfo = {} //清空上一个选择的商品
				uni.navigateTo({
					url:'/pagesFour/home/releMsg/selectStore?store_id=' + storeId
				})
			},
			// 添加商品
			toSelectShop(){
				if(!this.storeInfo.id){
					uni.showToast({
						title:'请先添加店铺',
						icon:'none'
					})
					return
				}
				if(this.shopList.length>=5){
					uni.showToast({
						title:'最多可选5件商品',
						icon:'none'
					})
					return
				}
				let arr = []
				this.shopList.map(item=>{
					arr.push(item.product_id)
				})
				let product_Arr = arr.join(',')
				this.shopInfo = {} //清空上一个选择的商品
				uni.navigateTo({
					url:`/pagesFour/home/releMsg/selectShop?store_id=${this.storeInfo.id}&product_id=${product_Arr}&storeLogo=${this.storeInfo.store_logo.path}&storeName=${this.storeInfo.store_name}`
				})
			},
			// 删除添加的商品
			delShop(index){
				this.shopList.splice(index,1)
			},
			
			changeInput(e){
				this.inputNum = e.detail.cursor
				// console.log(e,'输入框')
			},
			changeArea(e){
				this.areaNum = e.detail.cursor
				// console.log(e,'信息框')
			},
			
			// 发布按钮
			submitFN(){
				if(!this.tit){
					uni.showToast({
						title:'请填写标题',
						icon:'none'
					})
					return
				}
				if(!this.cont){
					uni.showToast({
						title:'请填写内容',
						icon:'none'
					})
					return
				}
				
				// if(this.type != 'img' && !this.coverId){
				// 	uni.showToast({
				// 		title:'封面图必传',
				// 		icon:'none'
				// 	})
				// 	return
				// }
				
				uni.showLoading({
					title:'发布中...'
				})
				let arr = []
				this.mediaList.map(item=>{
					arr.push(item.id)
				})
				let media = arr.join(',')
				let productIdArr = []
				this.shopList.map(item=>{
					productIdArr.push(item.product_id)
				})
				let product_id = productIdArr.join(',')
				let params = {
					partner_id:this.$store.state.index.sid,
					partner_type:this.$store.state.index.role,
					user_id:this.$store.state.index.userId,
					title:this.tit,
					content:this.cont,
					type:this.type=='img'?0:1,
					media,
					store_id:this.storeInfo.id,
					product_id,
					cover:this.coverId,
					module_type:this.moduleType=='superHK'?2:1, //模块（1-合作方，2-超级管家）
				}
				this.$api.releDynamic(params).then(res=>{
					console.log(res,'发布结果')
					if(res.code==1){
						uni.showToast({
							title:'发布成功',
							icon:'success'
						})
						this.tit = ''
						this.cont = ''
						this.mediaList = []
						this.coverId = ''
						this.coverUrl = ''
						uni.redirectTo({
							url:`/pagesFour/home/dynamicManage/dynamicList?moduleType=${this.moduleType}`
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2500
						})
					}
					uni.hideLoading()
				})
			},
			
			// 删除图片或视频
			delImgFn(index){
				this.mediaList.splice(index,1)
			},
			// 删除封面
			delCoverFn(){
				this.coverUrl = '';
				this.coverId = '';
			},
			// 上传
			uploadFN(type){
				if(type=='img' || type=='cover'){
					uni.chooseImage({
						count:1,
					    success: (res) => {
					        const tempFilePaths = res.tempFilePaths;
							console.log(res)
							// if(res.tempFiles.size>)
					        uni.uploadFile({
					            url: URL.ENTER_UPLOAD_IMAGE,
					            filePath: tempFilePaths[0],
					            name: 'file',
					            formData: {
					                'user': 'test'
					            },
					            success: (uploadFileRes) => {
									uni.showLoading({
										title:'上传中'
									})
					                console.log(uploadFileRes.data);
									let data = JSON.parse(uploadFileRes.data)
									if(data.code==1){
										if(type=='img'){ //图片
											let obj = {
												path:data.data.url,
												id:data.data.id
											}
											this.mediaList.push(obj)
										}else{ //视频封面图
											this.coverUrl = data.data.url,
											this.coverId = data.data.id
										}
										uni.showToast({
											title:'上传成功',
											icon:'success'
										})
									}else{
										uni.showToast({
											title:data.msg,
											icon:'none'
										})
									}
									setTimeout(function(){
										uni.hideLoading()
									},500)
					            }
					        });
					    }
					});
				}else{
					uni.chooseVideo({
					    count: 1,
					    sourceType: ['camera', 'album'],
						maxDuration: 60,
						compressed:false,
					    success:res=>{
					       const tempFilePaths = res.tempFilePath;
						   console.log(tempFilePaths)
						   uni.showLoading({
						   	title:'上传中'
						   })
					       uni.uploadFile({
					           url: URL.ENTER_UPLOAD_IMAGE,
					           filePath: tempFilePaths,
					           name: 'file',
					           success: (uploadFileRes) => {
					       		// uni.showLoading({
					       		// 	title:'上传中'
					       		// })
					               console.log(uploadFileRes.data);
					       		let data = JSON.parse(uploadFileRes.data)
					       		if(data.code==1){
									console.log(data)
					       			let obj = {
					       				path:data.data.url,
					       				id:data.data.id
					       			}
					       			this.mediaList.push(obj)
					       			uni.showToast({
					       				title:'上传成功',
					       				icon:'success'
					       			})
					       		}else{
					       			uni.showToast({
					       				title:data.msg,
					       				icon:'none'
					       			})
					       		}
					       		setTimeout(function(){
					       			uni.hideLoading()
					       		},1000)
					           }
					       });
					    }
					});
				}
			},
			
		}
	}
</script>

<style lang="scss">
	page{height: 100%;background-color: #fff;}
	@import  '../../iconfont.css';
	.releMsg{
		padding: 0 32rpx;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
		.imgBox{
			margin-top: 40rpx;
			// padding: 0 32rpx;
			display: grid;			grid-template-columns: repeat(4, 1fr);			grid-gap: .5rem;
			.item{
				position: relative;
				width: 164rpx;
				height: 164rpx;
				border-radius: 8rpx;
				text-align: center;
				line-height: 164rpx;
				font-size: 50rpx;
				color: #A0A0A0;
				border: 2rpx solid #EBEBEB;
				image{
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
				.delImg{
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}
		
		.videoBox{
			margin-top: 40rpx;
			padding-left: 16rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: .5rem;
			.item{
				position: relative;
				width: 308rpx;
				height: 400rpx;
				border-radius: 4rpx;
				text-align: center;
				line-height: 400rpx;
				font-size: 50rpx;
				color: #A0A0A0;
				border: 2rpx solid #EBEBEB;
				video{
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
				.delImg{
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}
		.txt{color: #DBA954;font-size: 24rpx;margin-top: 18rpx;}
		.tit{
			margin-top: 28rpx;
			padding: 32rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #EBEBEB;
			input{width: 480rpx;font: 400 32rpx/52rpx PingFang SC;color: #333333;}
			.titCss{
				font: 400 32rpx/52rpx PingFang SC;
				color: #939393;
			}
		}
		.content{
			padding: 32rpx 0;
			border-bottom: 2rpx solid #EBEBEB;
			// margin-bottom: 140rpx;
			textarea{
				width: 100%;
				height: 174rpx;
				font: 400 28rpx/40rpx PingFang SC;
				color: #333;
			}
			display: flex;
			flex-direction: column;
			text{
				margin-left: auto;
			}
			.contentCss{
				font: 400 28rpx/40rpx PingFang SC;
				color: #939393;
			}
		}
		
		// 添加店铺
		.addStore{
			border-bottom: 2rpx solid #EBEBEB;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				display: flex;
				align-items: center;
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 14rpx;
				}
				font: 500 28rpx/100rpx PingFang SC;
				color: #A1A1A1;
			}
			.iconfont{
				font-size: 22rpx;
				color: #A1A1A1;
			}
		}
		
		// 添加商品
		.addShop{
			margin-bottom: 140rpx;
			.topTit{
				display: flex;
				align-items: center;
				image{
					width: 22rpx;
					height: 22rpx;
					margin-right: 18rpx;
				}
				font: 500 28rpx/100rpx PingFang SC;
				color: #B59A57;
			}
			.item{
				width: 686rpx;
				height: 160rpx;
				margin-bottom: 20rpx;
				background-color: #F9F9F9;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				position: relative;
				padding: 20rpx;
				image{
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
					flex-shrink: 0;
					margin-right: 20rpx;
				}
				.shopInfo{
					font: 500 28rpx/80rpx PingFang SC;
					color: #1B1B1B;
					.title{
						width: 468rpx;
					}
					.price{
						font: 500 32rpx/32rpx PingFang SC;
						color: #E75816;
						text{
							margin-left: 12rpx;
							font: 500 22rpx/32rpx PingFang SC;
							color: #999999;
							text-decoration: line-through;
						}
					}
				}
				.delImg{
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					top: 22rpx;
					right: 22rpx;
					margin: 0;
				}
			}
		}
		
		// 发布按钮
		.btn{
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 20;
			background-color: #fff;
			width: 100%;
			height: 100rpx;
			display: flex;
			padding: 0rpx 24rpx;
			align-items: center;
			justify-content: space-between;
			height: calc(100rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
			height: calc(100rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			.btnLeft{
				display: flex;
				flex-direction: column;
				align-items: center;
				font: 400 18rpx/20rpx PingFang SC;
				color: #A0A0A0;
				.img{
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					background-color: #F5F5F5;
					image{width: 48rpx;height: 48rpx;}
				}
			}
			button{
				width: 606rpx;
				height: 80rpx;
				margin: 10rpx auto;
				background-image: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
				box-shadow: 0px 6rpx 12rpx rgba(219, 169, 84, 0.3);
				border-radius: 46rpx;
				font: 500 32rpx/80rpx PingFang SC;
				color: #fff;
			}
		}
	}
</style>
